<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2019/7/12
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/"/>
    <%@include file="/publs.jsp"%>
    <script>
        var cxk="<%=request.getContextPath()%>";
    </script>
</head>
<body>
<div id="root">
    <modal v-model="openRecord" title="盘点详情" @on-ok="" width="650">
        <i-table :data="recordData" :columns="recordColumns"></i-table>
    </modal>



    <modal v-model="commentModal" title="友情提醒" @on-ok="updKucun" >
        <h4>并确认修正库存,填写差异理由:</h4>
        <i-form>
            <i-input type="textarea" v-model="comment" />
        </i-form>
    </modal>
    <modal title="盘底记录" @on-ok="" v-model="recordModal" width="650">
        <row>
            <todo-item v-for="item in inventList" v-bind:todo="item" v-bind:key="item.inId"></todo-item>
        </row>
    </modal>
    <div class="demo-split">
        <Split v-model="split">
            <div slot="left" class="demo-split-pane">
                <tree :data="treeData" @on-select-change="treeChange"></tree>
            </div>
            <div slot="right" class="demo-split-pane">
                <card style="text-align: center"><h3>库存盘点</h3></card>
                <i-form :label-width="80">
                    <row>
                        <i-col :span="8">
                            <form-item label="查找商品:">
                                <i-input v-model="drugsName" placeholder="药品名称" />
                            </form-item>
                        </i-col>
                        <i-col :span="8" style="margin-left: 20px">
                            <i-button type="primary" icon="ios-search" @click="select">查询</i-button>
                            <i-button type="info" icon="ios-build" @click="openComment">修正库存</i-button>
                            <i-button type="success" icon="md-albums" @click="inventoryRecord">盘点记录</i-button>
                        </i-col>
                    </row>
                </i-form>
                <i-table :data="tableData" :columns="columns" border stripe>
                    <template slot="panNumber" slot-scope="{row,index}">
                        <input-number v-model="row.panNum" @on-blur="jisuan(row,index)"/>
                    </template>
                    <template slot="chaNumber" slot-scope="{row}">
                            <span>
                                {{row.chaNum}}
                            </span>
                    </template>
                </i-table>
            </div>
        </Split>
    </div>
</div>


<script>
    var demo = new Vue({
        el:"#root",
        data:{
            split:0.3,
            tableData:[],
            columns:[
                {title:"编号", key:"drugsid", sortable:true},
                {title:"药品名称", key:"drugsName", tooltip:true},
                {title:"单价/元", key:"price"},
                {title:"所在仓库",key:"wname"},
                {title:"单位", key:"companyids"},
                {title:"数量", key:"number"},
                {title:"盘点数量",key:"panNum",slot:"panNumber"},
                {title:"差异数量",key:"chaNum",slot:"chaNumber"},
            ],
            drugsName:"",
            panNum:0,
            chaNum:"",
            treeData:[],
            recordModal:false,
            inventList:[],
            commentModal:false,
            comment:"",
            recordData:[],
            recordColumns:[
                {title:"药品编号",key:"drugsId"},
                {title:"药品名称",key:"drugsName"},
                {title:"药品单价",key:"price"},
                {title:"药品所在位置",key:"wName"},
                {title:"库存数量",key:"drugsNumber"},
                {title:"实际数量",key:"panNum"}
            ],
            openRecord:false
        },
        methods:{
            searchAll(){
                axios.get(`${cxk}/kucun/searchDrug`)
                    .then(({data})=>{
                        this.tableData = data.obj;
                    });
            },
            select(){
                axios.get(`${cxk}/check/searchName?drugsName=${this.drugsName}`)
                    .then(({data})=>{
                        this.tableData = data.obj;
                    })
            },
            jisuan(row,index){
                row.chaNum = row.panNum-row.number

                this.tableData[index].chaNum=row.chaNum;
                this.tableData[index].panNum=row.panNum;
            },
            updKucun(){
                axios.post(`${cxk}/check/updChaNum?comment=${this.comment}`,this.tableData)
                    .then(({data})=>{
                        iview.Message.warning(data.msg);
                        this.searchAll();
                    })
                this.comment="";
            },
            searchTree(){
                axios.get(`${cxk}/check/treeData`)
                    .then(({data})=>{
                        this.treeData=data.obj;
                    })
            },
            treeChange(a,b){
                axios.get(`${cxk}/check/searchBitId?bitId=${b.id}`)
                    .then(({data})=>{
                        this.tableData = data.obj;
                    })
            },
            inventoryRecord(){
                this.recordModal = true;
                axios.get(`${cxk}/check/searchInvent`)
                    .then(({data})=>{
                        this.inventList=data.obj;
                    })

            },
            openComment(){
                this.commentModal=true;
            },
            searchRecord(){

            }
        },
        mounted(){
            this.searchAll();
            this.searchTree();
        }

    })

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<i-col span="8">\n' +
            '                <card @click.native="searchRecord(todo.inId)">\n' +
            '                    <p><span style="font-weight: 800">盘点日期:</span>:{{todo.inventDate}}</p>\n' +
            '                    <p><span style="font-weight: 800">差异数量:</span>:{{todo.chaNum}}</p>\n' +
            '                    <p><span style="font-weight: 800">差异理由:</span>:{{todo.comment}}</p>\n' +
            '                </card>\n' +
            '            </i-col>',
        methods:{
            searchRecord(inId){
                demo.openRecord=true;
                axios.get(`${cxk}/check/searchRecord`,{params:{invRecordId:inId}})
                    .then(({data})=>{
                        demo.recordData=data.obj;
                    })
            }
        }
    })
</script>
</body>
</html>
